<template>
	<view class="index">
		<uni-nav-bar fixed="true" status-bar="true" left-icon="back">
		   <view class="search">
			   <input type="text" v-model="keyword"  value="" placeholder="宝贝名称" :focus="true" confirm-type="search" @confirm="search()"/> 
			   <view class="btn" @tap="search()">搜索</view>
		   </view>	   
		</uni-nav-bar>
		
		<view class="content">
			<view class="history">
				<view class="header">
					<view class="title">最近搜索</view>
					<view class="iconfont icon-shanchu1" @tap="clearHistory()"></view>
				</view>
				<view class="list">
					<view class="item" v-for="(item, index) in history" @tap="setKeyword(item)" :key="index">{{item}}</view>
				</view>
			</view>
			
			<view class="history">
				<view class="header">
					<view class="title">热门搜索</view>
					<view class="right" @tap="switchWord()">
						<view class="iconfont icon-qiehuan"></view>
						<view>换一换</view>
					</view>
					
				</view>
				<view class="list">
					<view class="item" v-for="(item, index)  in hotList[hotIndex]" @tap="setKeyword(item)"  :key="index">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar.vue';
	import Request from '../../common/request.js';
	
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				keyword: '',
				history: [],
				hotList: [],
				hotIndex: 0
			};
		},
		onLoad() {
			this.getHotSearch();
			this.getHistory();
		},
		methods: {
			//获取热门搜索
			getHotSearch: function(){
				
				var url = 'goods/hotSearch';
				var that = this;
				Request.send({
					url: url,
					sCallback: function(res) {
						that.hotList = res.data;
					}
				})
			},
			//搜索
			search: function(){
				
				var keyword = this.keyword;
				if(!keyword) {
					Request.send('请输入要搜索的内容');
					return ;
				}
				
				var history = uni.getStorageSync('searchHistory');
				
				if(history) {
					history = history.split(',');
					history.forEach(function(item, index){
						if(item == keyword) {
							history.splice(index,1);
						}
						
						if(index > 6) {
							history.splice(index,1);
						}
					});

					history = history.toString();
					history = keyword+','+history;
					uni.setStorageSync('searchHistory', history);
				} else {
					uni.setStorageSync('searchHistory', keyword);
				}
				
				uni.redirectTo({
					url: '/pages/goods/search-goods?keyword='+keyword
				})
				
			},
			//获取历史搜索记录
			getHistory: function(){
				var history = uni.getStorageSync('searchHistory');
				if(history) {
					this.history = history.split(',');
				} else {
					this.history = [];
				}
			},
			//清空历史记录
			clearHistory: function(){
				uni.removeStorageSync('searchHistory');
				
				this.getHistory();
			},
			//设置搜索字
			setKeyword: function(val) {
				this.keyword = val;
				this.search();
			},
			//换一换
			switchWord: function(){
				
				if(this.hotIndex < this.hotList.length-1) {
					this.hotIndex ++;
				} else {
					this.hotIndex = 0;
				}
				
			}
		}
		
	}
</script>

<style>
	page{
		background: #fff;
	}
	.index .search{
		display: flex;
		flex-direction: row;
		font-size: 24upx;
		align-items: center;
	}
	
	.index .search input{
		flex: 1;
		caret-color: red;
	}
		
	.index .search .btn{
		padding: 0 40upx;
		color: #666;
	}
	
	.content {
		padding: 20upx;
		color: #666;
	}
	
	.content .history{
		margin-bottom: 40upx;
	}
	
	.content .header{
		display: flex;
		justify-content: space-between;
		height: 80upx;
		align-items: center;
		font-size: 20upx;
	}
	
	.content .header .right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.content .header .right .iconfont{
		margin-right: 10upx;
	}
	
	.content .list{
		width: 710upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.content .list .item{
		font-size: 28upx;
		padding: 10upx 20upx;
		background: #eee;
		
		margin-right: 20upx;
		margin-bottom: 20upx;
		border-radius: 10upx;
	}
</style>
